<template>
  <div style="padding:0px;">
    <el-form :model="dialogForm" :rules="rules" ref="dialogForm" :label-width="formLabelWidth">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="公司信息" name="1">
          <el-card class="box-card" style="border:0;">
            <div class="text item">
              <div slot="header" class="clearfix">
                <span style="line-height: 30px;">公司信息</span>
              </div>
              <el-form-item label="经销商名称">
                <el-input v-model="dialogForm.name" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="统一社会信用代码">
                <el-input :maxlength="10" v-model="dialogForm.documentId" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="注册资本(万元)" prop="registeredCapital" class="currency">
                <el-input :maxlength="10" v-model="dialogForm.registeredCapital" @blur="FormatFour('registeredCapital')" auto-complete="off"
                  :disabled="!suppleDialogFormVisible.isAdd"></el-input>
                <span class="convertCurrency">{{registeredCapital}}</span>
              </el-form-item>
              <el-form-item label="企业类别" prop="companyType">
                <el-input :maxlength="30" v-model="dialogForm.companyType" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>

              <el-form-item label="经销商类别" prop="category">
                <el-select v-model="dialogForm.category" placeholder="请选择经销商类别" :disabled="!suppleDialogFormVisible.isAdd">
                  <el-option label="请选择经销商类别" value="">
                  </el-option>
                  <el-option v-for="(item, index) in type" :label="item" :value="index-0" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="注册地址省市区" class="v-distpicker-width is-required" prop="provinceNid">
                <countySelect v-if="dialogForm.provinceNid||dialogForm.carBrandId==null" :provinceNid="dialogForm.provinceNid" :cityNid="dialogForm.cityNid"
                  :countyNid="dialogForm.countyNid" :isDisabled="!suppleDialogFormVisible.isAdd" v-on:receive-city-data="receiveCityData"></countySelect>
              </el-form-item>
              <el-form-item label="注册具体地址" prop="address">
                <el-input :maxlength="50" v-model="dialogForm.address" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="经营地址省市区" class="v-distpicker-width" prop="managementProvinceNid">
                <countySelect v-if="dialogForm.managementProvinceNid||(!suppleDialogFormVisible.dealerInfoId)||dialogForm.carBrandId==null"
                  :provinceNid="dialogForm.managementProvinceNid" :cityNid="dialogForm.managementCityNid" :countyNid="dialogForm.managementCountyNid"
                  :isDisabled="!suppleDialogFormVisible.isAdd" v-on:receive-city-data="receiveManagementCityData"></countySelect>
              </el-form-item>
              <el-form-item label="经营具体地址">
                <el-input :maxlength="50" v-model="dialogForm.managementAddress" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="营业范围" prop="businessScope">
                <el-input :maxlength="1000" type="textarea" :rows=3 v-model="dialogForm.businessScope" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card" style="border:0;">
            <div class="text item">
              <div slot="header" class="clearfix">
                <span style="line-height: 30px;">图片信息</span>
              </div>
              <el-form-item label="营业执照扫描件" class="is-required">
                <qiniu :qiniuImage="qiniuImage" :packJson="packJson" :id="qiniuImage.id" :canDelete="suppleDialogFormVisible.isAdd"></qiniu>
              </el-form-item>
              <el-form-item label="开户许可证">
                <qiniu :qiniuImage="qiniuImage1" :packJson="packJson1" :id="qiniuImage1.id" :canDelete="suppleDialogFormVisible.isAdd"></qiniu>
              </el-form-item>
              <el-form-item label="银行信用代码证">
                <qiniu :qiniuImage="qiniuImage2" :packJson="packJson1" :id="qiniuImage2.id" :canDelete="suppleDialogFormVisible.isAdd"></qiniu>
              </el-form-item>
              <el-form-item label="企业经营场地照片" class="is-required">
                <qiniu :qiniuImage="qiniuImage5" :packJson="packJson3" :id="qiniuImage5.id" :canDelete="suppleDialogFormVisible.isAdd"></qiniu>
              </el-form-item>
              <el-form-item label="声明书" class="is-required">
                <qiniu :qiniuImage="qiniuImage6" :packJson="packJson1" :id="qiniuImage6.id" :canDelete="suppleDialogFormVisible.isAdd"></qiniu>
              </el-form-item>

            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="人员信息" name="2">
          <el-card class="box-card" style="border:0;">
            <div class="text item">
              <div slot="header" class="clearfix">
                <span style="line-height: 30px;">经销商人员信息</span>
              </div>
              <el-form-item label="手机号码" class="half" >
                <el-input :maxlength="20" v-model="dialogForm.phone" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="使用者姓名" class="half">
                <el-input :maxlength="20" auto-complete="off" v-model="dialogForm.person" disabled></el-input>
              </el-form-item>
              <!--  prop="idCard"  身份证验证 -->
              <el-form-item label="使用者身份证" class="half">
                <el-input :maxlength="18" auto-complete="off" v-model="dialogForm.idCard" ></el-input>
              </el-form-item>
              <!--  prop="legalPersonName"  法人姓名验证 -->              
              <el-form-item label="法人姓名" class="half"  >
                <el-input :maxlength="20" v-model="dialogForm.legalPersonName" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="法人手机号码" class="half" prop="legalPersonPhone">
                <el-input :maxlength="11" v-model="dialogForm.legalPersonPhone" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="法人身份证" prop="legalPersonId">
                <el-input :maxlength="18" v-model="dialogForm.legalPersonId" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="法人邮箱" prop="legalPersonEmail">
                <el-input :maxlength="31" v-model="dialogForm.legalPersonEmail" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="实际控制人姓名" class="half">
                <el-input :maxlength="20" v-model="dialogForm.actualControllerPersonName" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="实际控制人手机号码" class="half">
                <el-input :maxlength="11" v-model="dialogForm.actualControllerPersonPhone" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="实际控制人身份证">
                <el-input :maxlength="18" v-model="dialogForm.actualControllerPersonId" auto-complete="off" :disabled="!suppleDialogFormVisible.isAdd"></el-input>
              </el-form-item>
              <el-form-item label="法人身份证照片" class="is-required">
                <qiniu :qiniuImage="qiniuImage3" :packJson="packJson2" :id="qiniuImage3.id" :canDelete="suppleDialogFormVisible.isAdd"></qiniu>
              </el-form-item>
              <el-form-item label="实际控制人身份证照片">
                <qiniu :qiniuImage="qiniuImage4" :packJson="packJson2" :id="qiniuImage4.id" :canDelete="suppleDialogFormVisible.isAdd"></qiniu>
              </el-form-item>
              <el-form-item label="使用者身份证照片">
                <qiniu :qiniuImage="qiniuImage7" :packJson="packJson2" :id="qiniuImage7.id" :canDelete="false"></qiniu>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card" style="border:0;">
            <div class="text item">
              <div slot="header" class="clearfix">
                <span style="line-height: 30px;">链上车人员信息</span>
              </div>

              <el-form-item label="业务员" prop="businessSysUsersId">
                <el-select v-model="dialogForm.businessSysUsersId" placeholder="请选择业务员" :disabled="!suppleDialogFormVisible.isAdd">
                  <el-option label="请选择业务员" value="">
                  </el-option>
                  <el-option v-for="(item,index) in yewuyuan" :label="item.realname" :value="item.id" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="地推员">
                <el-select v-model="dialogForm.pushSysUsersId" placeholder="请选择地推员" :disabled="!suppleDialogFormVisible.isAdd">
                  <el-option label="请选择地推员" value="">
                  </el-option>
                  <el-option v-for="(item,index) in ditui" :label="item.realname" :value="item.id" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="资源员">
                <el-select v-model="dialogForm.resourceSysUsersId" placeholder="请选择资源员" :disabled="!suppleDialogFormVisible.isAdd">
                  <el-option label="请选择资源员" value="">
                  </el-option>
                  <el-option v-for="(item,index) in ziyuan" :label="item.realname" :value="item.id" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="后台添加人" class="half">
                <el-input :maxlength="20" v-model="dialogForm.operator" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="添加时间/注册时间" class="half">
                <el-input :maxlength="20" :value="getDate(dialogForm.addDate)" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="实名认证时间" class="half">
                <el-input :maxlength="20" :value="getDate(dialogForm.realNameAuthenticationTime)" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="实名认证人" class="half">
                <el-input :maxlength="20" v-model="dialogForm.realNameAuthenticationPerson" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="企业认证时间" class="half">
                <el-input :maxlength="20" :value="getDate(dialogForm.authenticationTime)" auto-complete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="企业认证人" class="half">
                <el-input :maxlength="20" v-model="dialogForm.authenticationPerson" auto-complete="off" disabled></el-input>
              </el-form-item>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>

      <div style="text-align:right;margin-top:15px;">
        <el-button @click="returnBack">返 回</el-button>
        <el-button v-if="suppleDialogFormVisible.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  import qiniu from '@/views/qiniu/upload';
  import agentHttp from '@/utils/agentHttp.js';
  import {
    convertCurrency
  } from '@/utils/convertCurrency.js';
  import countySelect from '@/views/countySelect/index.vue';
  import {
    require,
    phone,
    decimalFour,
    isChinese,
    decimal,
    numOrEnglish,
    isCard
  } from '@/utils/rules.js'
  import {
    timestampToTime
  } from '@/utils/index.js'
  export default {
    created() {
      this.selectBaseData();
      this.selectDealerData();
    },
    props: ['suppleDialogFormVisible', 'tableData'],
    components: {
      qiniu,
      countySelect
    },
    data() {

      return {
        registeredCapital: "",
        formLabelWidth: '170px',
        yewuyuan: {},
        ditui: {},
        ziyuan: {},
        type: {},
        //弹窗或者查看页面信息
        dialogForm: {
          carBrandId: "",
          category: ""
        },
        rules: {
           idCard: [require('身份证', {
            trigger: "blur"
          }), {
            validator: isCard,
            trigger: "blur"
          }],
          legalPersonName: [require('法人姓名', {
            trigger: "blur"
          })],
          registeredCapital: [require('注册资本', {
            trigger: "blur"
          }), {
            validator: decimalFour,
            trigger: "blur"
          }],
          companyType: [require('企业类别', {
            trigger: "blur"
          })],
          category: [require('经销商类别', {
            type: "number",
            trigger: "change"
          })],
          address: [require('注册具体地址', {
            trigger: "blur"
          })],
          businessScope: [require('营业范围', {
            trigger: "blur"
          })],

          legalPersonName: [require('法人姓名', {
            trigger: "blur"
          })],
          legalPersonPhone: [require('法人手机号码', {
            trigger: "blur"
          }), {
            validator: phone,
            trigger: "blur"
          }],
          legalPersonId: [require('法人身份证号码', {
            trigger: "blur"
          }), {
            validator: numOrEnglish,
            trigger: "blur"
          }],
          legalPersonEmail: [require('法人邮箱', {
            trigger: "blur"
          }), {
            type: 'email',
            message: '请输入正确的法人邮箱地址',
            trigger: 'blur,change'
          }],
          businessSysUsersId: [require('业务员', {
            trigger: "change",
            type: "number"
          })]
        },
        activeName: "1",
        //七牛图片上传
        qiniuImage: {
          id: "qiniuImage", //图片预览的id   
          image_uri: [], //图片上传的列表  只含有url地址
        },

        qiniuImage1: {
          id: "qiniuImage1",
          image_uri: []
        },

        qiniuImage2: {
          id: "qiniuImage2",
          image_uri: []
        },

        qiniuImage3: {
          id: "qiniuImage3",
          image_uri: []
        },

        qiniuImage4: {
          id: "qiniuImage4",
          image_uri: []
        },
        qiniuImage5: {
          id: "qiniuImage5",
          image_uri: []
        },
        qiniuImage6: {
          id: "qiniuImage6",
          image_uri: []
        },
        qiniuImage7: {
          id: "qiniuImage7",
          image_uri: []
        },
        packJson: {
          maxLength: 6, //最大图片数量
          accept: "", //image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
          size: 4 //图片大小  单位兆
        },

        packJson1: {
          maxLength: 1,
          accept: "",
          size: 4
        },
        packJson2: {
          maxLength: 2,
          accept: "",
          size: 4
        },
        packJson3: {
          maxLength: 20,
          accept: "",
          size: 4
        }

      }
    },
    methods: {
      //省市区回调
      receiveCityData(province, city, county) { //依次为 省：{id:"",name:""}   市:{id:"",name:""}  区:{id:"",name:""}
        this.dialogForm.provinceNid = province.id;
        this.dialogForm.cityNid = city.id;
        this.dialogForm.countyNid = county.id;
      },
      receiveManagementCityData(managementProvince, managementCity, managementCounty) {
        this.dialogForm.managementProvinceNid = managementProvince.id;
        this.dialogForm.managementCityNid = managementCity.id;
        this.dialogForm.managementCountyNid = managementCounty.id;
      },

      returnBack() {
        this.suppleDialogFormVisible.dialogFormVisible = false;
      },
      submitConfirmForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addData();
          } else {
            this.$nextTick(() => {
              setTimeout(() => {
                this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);
              }, 500)
              return false;
            })
          }
        });
      },
      addData() {
        if (this.selectImageUrl()) {
          this.dialogForm.dealerId = this.suppleDialogFormVisible.id;
          agentHttp.postJson('adminApi/admin/dealer_info/makeup_change', this.dialogForm).then((data) => {
            if (data.success) {
              this.$emit('refreshTableData', null);
              this.suppleDialogFormVisible.dialogFormVisible = false;
              this.$message.success(data.data || "编辑成功");
            }
          })
        }
      },

      selectDealerData() {
        agentHttp.get('adminApi/admin/dealer_info/view/select_by_dealerId/' + this.suppleDialogFormVisible.id).then((
          data) => {
          if (data.success) {
            this.dialogForm = data.data;

            // if (this.dialogForm.id !== "" && this.dialogForm.id != null) {
              this.qiniuImage.image_uri = data.data.businessLicense != null ? data.data.businessLicense.split(',').notempty() :
                [];
              this.qiniuImage1.image_uri = data.data.openAnAccountLicensePic != null ? data.data.openAnAccountLicensePic
                .split(',').notempty() : [];
              this.qiniuImage2.image_uri = data.data.bankCreditCertificatePic != null ? data.data.bankCreditCertificatePic
                .split(',').notempty() : [];
              this.qiniuImage3.image_uri = data.data.legalPersonPic != null ? data.data.legalPersonPic.split(',').notempty() :
                [];
              this.qiniuImage4.image_uri = data.data.actualControllerPersonPic != null ? data.data.actualControllerPersonPic
                .split(',').notempty() : [];
              this.qiniuImage5.image_uri = data.data.businessOriginPic != null ? data.data.businessOriginPic.split(
                ',').notempty() : [];
              this.qiniuImage6.image_uri = data.data.statementPic != null ? data.data.statementPic.split(',').notempty() :
                [];
             
              this.qiniuImage7.image_uri = data.data.idCardPic != null ? data.data.idCardPic.split(',').notempty() :
                [];

              this.dialogForm.category == null ? this.dialogForm.category = "" : "";
              this.dialogForm.businessSysUsersId == null ? this.dialogForm.businessSysUsersId = "" : "";
              if (this.dialogForm.registeredCapital != "" && this.dialogForm.registeredCapital != null) {
                this.dialogForm.registeredCapital = (this.dialogForm.registeredCapital - 0).toFixed(4)
                this.FormatFour('registeredCapital', '万')
              }


            // }
          }
        })
      },
      selectBaseData() {
        agentHttp.get('adminApi/admin/dealer_info/view/get_basic_map/').then((data) => {
          if (data.success) {
            this.type = data.data.type;
            this.ditui = data.data.ditui;
            this.ziyuan = data.data.ziyuan;
            this.yewuyuan = data.data.yewuyuan;



          }
        })
      },

      selectImageUrl() {
        // debugger
        if (this.dialogForm.provinceNid == "" || this.dialogForm.provinceNid == null) {
          this.$message.warning('注册所属省不能为空');
          return false;
        };
        if (this.dialogForm.cityNid == "" || this.dialogForm.cityNid == null) {
          this.$message.warning('注册所属市不能为空');
          return false;
        };
        this.dialogForm.businessLicense = this.qiniuImage.image_uri.join(",");
        if (this.dialogForm.businessLicense.length < 1) {
          this.$message.warning('营业执照图片至少一张');
          return false;
        }
        this.dialogForm.openAnAccountLicensePic = this.qiniuImage1.image_uri.join(",");
        this.dialogForm.bankCreditCertificatePic = this.qiniuImage2.image_uri.join(",");
        this.dialogForm.legalPersonPic = this.qiniuImage3.image_uri.join(",");
        if (this.dialogForm.legalPersonPic.length < 1) {
          this.$message.warning('法人身份证照片图片至少一张');
          return false;
        }
        this.dialogForm.actualControllerPersonPic = this.qiniuImage4.image_uri.join(",");
        this.dialogForm.businessOriginPic = this.qiniuImage5.image_uri.join(",");
        if (this.dialogForm.businessOriginPic.length < 1) {
          this.$message.warning('企业经营场地图片至少一张');
          return false;
        }
        this.dialogForm.statementPic = this.qiniuImage6.image_uri.join(",");
        if (this.dialogForm.statementPic.length < 1) {
          this.$message.warning('声明书图片至少一张');
          return false;
        }

        this.dialogForm.idCardPic = this.qiniuImage7.image_uri.join(",");
        if (this.dialogForm.idCardPic.length < 1) {
          this.$message.warning('使用者身份证照片至少一张');
          return false;
        }

        return true;
      },
      FormatFour(val) {
        this.dialogForm[val] = ((this.dialogForm[val] || "") - 0).toFixed(4);
        this.registeredCapital = convertCurrency(((this.dialogForm[val] || "") - 0).toFixed(4), '万');
			},
			getDate(time){
				return timestampToTime(time);
			}
    }
  };
</script>